<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="title">消息</view>
    </view>
    
    <!-- AI客服入口 -->
    <view class="ai-assistant" @click="goToAIChat">
      <view class="avatar-wrapper purple">
        <text class="message-icon">🤖</text>
      </view>
      <view class="content">
        <view class="title">山海之约小助手 <text class="official">AI客服</text></view>
        <view class="desc">您好！有什么可以帮到您的吗？</view>
      </view>
      <text class="time">刚刚</text>
    </view>
    
    <!-- 消息列表 -->
    <view class="message-list">
      <!-- 订单消息 -->
      <view class="message-item" @click="goToMessageDetail('订单消息')">
        <view class="avatar-wrapper blue">
          <text class="message-icon">📋</text>
        </view>
        <view class="content">
          <view class="title">订单消息</view>
          <view class="desc">你的订单已完成</view>
        </view>
        <view class="time">3分钟前</view>
      </view>

      <!-- 互动消息 -->
      <view class="message-item" @click="goToMessageDetail('互动消息')">
        <view class="avatar-wrapper orange">
          <text class="message-icon">💬</text>
        </view>
        <view class="content">
          <view class="title">互动消息</view>
          <view class="desc">@用户1008600评论了你的内容</view>
        </view>
        <view class="time">5小时前</view>
      </view>

      <!-- 系统消息 -->
      <view class="message-item" @click="goToMessageDetail('系统消息')">
        <view class="avatar-wrapper green">
          <text class="message-icon">🔔</text>
        </view>
        <view class="content">
          <view class="title">系统消息<text class="official">官方</text></view>
          <view class="desc">你提交的个人信息审核通过</view>
        </view>
        <view class="time">23小时前</view>
      </view>

      <!-- 用户消息1 -->
      <view class="message-item" @click="goToMessageDetail('果汁分你一半')">
        <view class="avatar-wrapper">
          <image src="/static/images/avatar1.jpg" mode="aspectFill"></image>
        </view>
        <view class="content">
          <view class="title">果汁分你一半</view>
          <view class="desc">[游记消息]</view>
        </view>
        <view class="time">2天前</view>
      </view>

      <!-- 用户消息2 -->
      <view class="message-item" @click="goToMessageDetail('飞来飞去')">
        <view class="avatar-wrapper">
          <image src="/static/images/avatar2.jpg" mode="aspectFill"></image>
        </view>
        <view class="content">
          <view class="title">飞来飞去</view>
          <view class="desc">老哥来北京玩啊~</view>
        </view>
        <view class="time">1周前</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    // 优化的消息详情页跳转函数
    goToMessageDetail(sender) {
      try {
        // 预设置一个最大允许时间
        const maxWaitTime = 100;
        let timeoutId = null;
        
        // 设置超时处理
        timeoutId = setTimeout(() => {
          uni.hideLoading();
          // 如果超时，直接使用redirectTo
          uni.redirectTo({
            url: `/pages/message/detail?sender=${encodeURIComponent(sender)}`
          });
        }, maxWaitTime);
        
        // 直接跳转，不再使用延迟
        uni.redirectTo({
          url: `/pages/message/detail?sender=${encodeURIComponent(sender)}`,
          success: () => {
            clearTimeout(timeoutId);
            uni.hideLoading();
          },
          fail: (err) => {
            clearTimeout(timeoutId);
            uni.hideLoading();
            console.error('跳转失败:', err);
          }
        });
      } catch (e) {
        uni.hideLoading();
        console.error('导航异常:', e);
      }
    },
    goToAIChat() {
      this.$navigateTo('/pages/message/ai-chat');
    }
  }
}
</script>

<style lang="scss">
.container {
  background: #fff;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 30rpx;
  background: #fff;
  border-bottom: 1px solid #eee;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    color: #333;
  }
}

.ai-assistant {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  background: #f8f8ff;
  border-bottom: 1px solid #f0f0ff;
  position: relative;
  
  &:active {
    background-color: #f0f0ff;
  }
  
  .avatar-wrapper {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    flex-shrink: 0;
    
    &.purple {
      background: #8A2BE2;
      color: #fff;
    }
    
    .message-icon {
      font-size: 36rpx;
    }
  }
  
  .content {
    flex: 1;
    
    .title {
      font-size: 32rpx;
      color: #333;
      margin-bottom: 8rpx;
      display: flex;
      align-items: center;
      font-weight: normal;
      
      .official {
        font-size: 20rpx;
        color: #8A2BE2;
        border: 1rpx solid #8A2BE2;
        padding: 0 8rpx;
        border-radius: 4rpx;
        margin-left: 10rpx;
        height: 32rpx;
        line-height: 32rpx;
      }
    }
    
    .desc {
      font-size: 28rpx;
      color: #666;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 450rpx;
    }
  }
  
  .time {
    font-size: 24rpx;
    color: #8A2BE2;
    position: absolute;
    right: 30rpx;
    top: 24rpx;
  }
}

.message-list {
  .message-item {
    display: flex;
    align-items: center;
    padding: 24rpx 30rpx;
    background: #fff;
    border-bottom: 1px solid #f5f5f5;
    position: relative;
    
    &:active {
      background-color: #f8f8f8;
    }

    .avatar-wrapper {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
      overflow: hidden;
      flex-shrink: 0;
      
      &.blue {
        background: #4080ff;
      }
      
      &.orange {
        background: #ff6b6b;
      }
      
      &.green {
        background: #34c759;
      }
      
      .message-icon {
        font-size: 36rpx;
      }
      
      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .content {
      flex: 1;

      .title {
        font-size: 32rpx;
        color: #333;
        margin-bottom: 8rpx;
        display: flex;
        align-items: center;
        font-weight: normal;

        .official {
          font-size: 20rpx;
          color: #34c759;
          border: 1rpx solid #34c759;
          padding: 0 8rpx;
          border-radius: 4rpx;
          margin-left: 10rpx;
          height: 32rpx;
          line-height: 32rpx;
        }
      }

      .desc {
        font-size: 28rpx;
        color: #999;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 450rpx;
      }
    }

    .time {
      font-size: 24rpx;
      color: #bbb;
      position: absolute;
      right: 30rpx;
      top: 24rpx;
    }
  }
}
</style> 